import { Component } from 'react';
import styles from './index.less';
import { connect } from 'dva';
import Loading from 'src/components/loading';
import router from 'umi/router';
console.log('​router', router);

class RedPkgRecord extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'redPkgRecord/geRedPkgRecordEff'
    });
  }

  render() {
    let { myRecord, redPkg,userinfo } = this.props;
    let {nickname,headimgurl} = userinfo
    return (
      <div className={styles.hoji_box}>
        <div className={styles.topa_hoji}>
          <span className={styles.abao_topa} href="">
            红包详情
          </span>
          {/* <span className={styles.bbao_topa} href="">
            红包记录
          </span> */}
          <div className={styles.jian_topa} onClick={() => router.goBack()} />
        </div>
        <div className={styles.cont_hoji}>
          <div className={styles.toxi_cont}>
            <img
              className={styles.imge_toxi}
              src={headimgurl}
              alt=""
            />
            <span className={styles.span_toxi}>{nickname}</span>
            <p className={styles.pwen_toxi}>{redPkg ? redPkg.zhufu : ''}</p>
          </div>
          {myRecord && <div className={styles.qian_cont}>
            <p className={styles.span_qian}>{myRecord.money || 0}</p>
            <span className={styles.awen_qian} href="">
              已存入生活商城余额(牛币)，可用于购买商品
            </span>
          </div>}
        </div>
        <div className={styles.bott_hoji}>
          <div className={styles.miao_bott}>
            <p className={styles.pwen_miao}>
              {redPkg.total_num}
              个红包共
              {redPkg.total_money}元
            </p>
          </div>
          {redPkg.redPkgRecords &&
            redPkg.redPkgRecords.map((record, index) => (
              <div className={styles.rens_bott} key={index}>
                <img className={styles.imgs_rens} src={record.user.headimgurl} alt="" />
                <div className={styles.wenb_rens}>
                  <span className={styles.span_wenb}>{record.user.nickname}</span>
                  {/* <br />
                <span className={styles.liuy_wenb}>留言</span> */}
                </div>
                <div className={styles.yuan_rens}>
                  <span className={styles.shuz_yuan}>{record.money}</span>
                  <br />
                  {record.is_best && <span className={styles.zuij_yuan}>手气最佳</span>}
                </div>
              </div>
            ))}
        </div>
      </div>
    );
  }
}
export default connect(({ redPkgRecord, loading,muniuren }) => {
  console.log('​loading', loading);
  return {
    ...redPkgRecord,
    ...muniuren,
    loading: loading.models.redPkgRecord
  };
})(Loading(RedPkgRecord));
